<template>
    <div id="person">
        <div class="person_box">
            <el-divider></el-divider>
            <el-form :model="form">
                <el-form-item label="用户id" :label-width="'120px'" v-show="false">
                    <el-input v-model="form.id" readonly></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="'120px'">
                    <el-button type="primary" @click="editPerson" v-show="!readOnly" :disabled="btnDisabled">确认修改</el-button>
                    <el-button type="primary" @click="showEdit" v-show="readOnly" >我要修改</el-button>
                </el-form-item>

                <el-form-item label="用户名" :label-width="'120px'">
                    <el-input v-model="form.userName" readonly></el-input>
                </el-form-item>

                <el-form-item label="昵称" :label-width="'120px'">
                    <el-input v-model="form.nickName" @change="submitShow" :readonly="readOnly"></el-input>
                </el-form-item>

                <el-form-item label="性别" :label-width="'120px'">
                    <el-select v-model="form.sex" placeholder="性别" @change="submitShow" :disabled="readOnly">
                        <el-option
                                v-for="item in sexDictionary"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="真实姓名" :label-width="'120px'">
                    <el-input v-model="form.realName" @change="submitShow" :readonly="readOnly"></el-input>
                </el-form-item>

                <el-form-item label="手机号" :label-width="'120px'">
                    <el-input v-model="form.phone" readonly></el-input>
                </el-form-item>

                <el-form-item label="邮箱" :label-width="'120px'">
                    <el-input v-model="form.email" @change="submitShow" :readonly="readOnly"></el-input>
                </el-form-item>

            </el-form>
        </div>
        <div class="record_box">
            <el-divider></el-divider>
            <el-table
                    :data="loginRecord"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="当前登录IP" :label-width="'120px'">
                                <span>{{ props.row.ipLogin }}</span>
                            </el-form-item>
                            <el-form-item label="登录时间" :label-width="'120px'">
                                <span>{{ props.row.gmtModified }}</span>
                            </el-form-item>
                            <el-form-item label="上次登录IP" :label-width="'120px'">
                                <span>{{ props.row.ipLastLogin }}</span>
                            </el-form-item>
                            <el-form-item label="上次登录时间" :label-width="'120px'">
                                <span>{{ props.row.gmtLastLogin }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="当前登录IP"
                        prop="ipLogin">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Person",
        data(){
            return{
                btnDisabled: true,
                readOnly: true,
                sexDictionary:[
                    {
                        label: null,
                        value: null
                    }
                ],
                form:{

                },
                confirmForm:{

                },
                loginRecord:[
                    {

                    }
                ]
            }
        },
        methods: {
            getPerson() {
                this.$http.get("/sysUser/person").then(resp => {
                    let data = resp.data;
                    if (data.code === 200){
                        this.form = data.data;
                        this.getDictionary();
                        this.setConfirm();
                    }else {
                        this.$message.error(data.info);
                    }
                })
            },
            async setConfirm() {
                let resp = await this.$http.get("/sysUser/person");
                let data = resp.data;
                if (data.code === 200) {
                    this.confirmForm = data.data;
                } else {
                    this.$message.error(data.info);
                }
            },
            async getDictionary() {
                let resp = await this.$http.get("/sysDictionary/getByParentCode?parentCode=sex");
                let data =resp.data;
                if (data.code === 200){
                    this.sexDictionary = data.rows;
                }else {
                    this.$message.error(data.info);
                }
            },

            async getRecord() {
                let resp = await this.$http.get("/sysUser/getLoginRecord");
                let data = resp.data;
                if (data.code === 200) {
                    this.loginRecord[0] = data.data;
                } else {
                    this.$message.error(data.info);
                }
            },
            async editPerson() {
                if (this.form === this.confirmForm){
                    console.log("没有修改数据");
                    return ;
                }
                let resp = await this.$http.put("/sysUser/editPerson", this.form);
                let data = resp.data;
                if (data.code === 200) {
                    this.$message.success(data.info);
                } else {
                    this.$message.error(data.info);
                }
                this.readOnly = true;
            },

            showEdit(){
                this.readOnly = false;
            },

            submitShow(){
                let nickName = this.form.nickName;
                let sex = this.form.sex;
                let realName = this.form.realName;
                let email = this.form.email;
                let nickName1 = this.confirmForm.nickName;
                let sex1 = this.confirmForm.sex;
                let realName1 = this.confirmForm.realName;
                let email1 = this.confirmForm.email;
                this.btnDisabled = nickName===nickName1&&sex===sex1&&realName===realName1&&email===email1;
            }

        },
        created() {
            this.getPerson();
            this.getRecord();
        }
    }
</script>

<style scoped>
    .record_box{
        width: 70%;
        margin-left: 15%;
    }
    #person{
        width: 100%;
    }
    .person_box{
        width: 50%;
        margin-left: 25%;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 100%;
    }
</style>
